<template>
<div>
    <p style="font-size:20px ;margin :20px 0">添加4S店</p>
<el-form :rules="rules" ref="ruleForm" :model="form" label-position="top" label-width="80px">
  <el-form-item label="店铺名称" prop="name"> 
    <el-input v-model="form.name"></el-input>
  </el-form-item>
    <el-form-item label="店铺短名称" prop="shortName">
    <el-input v-model="form.shortName"></el-input>
  </el-form-item>
  <el-form-item label="店铺主维修车型" prop="majorModel">
    <el-select v-model="form.majorModel" placeholder="请选择活动区域">
      <el-option v-for=" i in majorModelData" :key="i.type" :label="i.type" :value="i.type"></el-option>
    
    </el-select> 
  </el-form-item>
  <el-form-item label="店铺折扣" prop="discount">
    <el-col :span="1">
     <span>工时</span>
    </el-col>
    <el-col :span="5">
     <el-input v-model="form.discount"></el-input>
    </el-col>
    <el-col :span="5">
     <span>折</span>
    </el-col>
  </el-form-item>
    <el-form-item label="店铺地址" prop="address">
    <el-input v-model="form.address"></el-input>
  </el-form-item>
  <el-form-item label="所在区域" prop="regareaion">
    <el-select v-model="form.area" placeholder="请选择活动区域">
           <el-option v-for=" i in areaData" :key="i.type" :label="i.type" :value="i.type"></el-option>

    </el-select>
  </el-form-item>
  <el-form-item label="店铺是否签约" prop="isSigned">
    <el-radio-group v-model="form.isSigned">
      <el-radio v-model="form.isSigned" label="true">是</el-radio>
      <el-radio v-model="form.isSigned" label="false">否</el-radio>
    </el-radio-group>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
    <el-button type="primary" @click="submit">取消</el-button>
  </el-form-item>
</el-form>
</div>
</template>

<script>
  export default {
   

     data() {
      return {
        majorModelData:[{
            'type':'奔驰'
        },
        {
            'type':'宝马'
        },
        {
            'type':'奥迪'
        }
        ],
         areaData:[{
            'type':'高新区'
        },
        {
            'type':'武侯区'
        },
        {
            'type':'青羊区'
        }
        ],
        form:{
        "address": "成都市高新区天府三街1325号",
        "area": "高新区",
        "discount": 9.8,
        "id": 0,
        "isSigned": "true",
        "majorModel": "奔驰",
        "name": "成都晨德宝汽车销售有限公司",
        "shortName": "晨德宝，机场燕宝"
        },
          rules: {
          shortName: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          address: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          discount: [
            { required: true, message: '请选择日期', trigger: 'change' }
          ],
          isSigned: [
            {  required: true, message: '请选择时间', trigger: 'change' }
          ],
          majorModel: [
            {  required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],
          name: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      submit(){
        this.$router.push("/content/shop/4s");
      },
     submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$message({
          message: '添加成功',
          type: 'success'
        });
           this.addCarShop(this.form)
           this.$router.push("/content/shop/4s");
           
          } else {
            console.log('error submit!!');
            this.$message({
          message: '有内容未填写,或未填写正确',
          type: 'warning'
        });
            return false;
          }
        });
      },
      addCarShop(data){
  let Response
  this.$http({
    url: "/s4Shop/insert",
    method: "POST",
    data: data
  })
    .then((res) => {
      Response = res
      console.log('获取4sxdcdcd', res)

    })
    .catch((err) => {
      console.log('订单来源数据获取失败', err)
    })
  return Response
}
      
    }
  }

</script>